<template>
  <div>
    <common-header></common-header>

    <!-- 商品分类选项 -->
    <div class="cate-box">
      <ul>
        <li :class="['全部'===activeName? 'activeLi': '']" @click="changeA('全部')">全部</li>
        <li v-for="(item) in shopCateList" :key="item.id" :class="[item.name===activeName? 'activeLi': '']" @click="changeA(item)">
          {{item.name}}
        </li>
      </ul>
    </div>
    <!-- 商品展示卡片 -->
    <div class="shop-list-box" v-loading="loading">
      <div class="shop-list">
        <div class="row" style="min-height:400px;">
          <div class="col-md-3" v-for="item in shopList" :key="item.id">
            <el-card class="mycard">
              <div class="shop-item">
                <div class="shop-img">

                  <img :src="item.img" alt="">
                </div>
                <div class="shop-detail">
                  <div class="shop-price">
                    <div class="shop-price-warp">
                      <div class="wrap-left">
                        <span v-if="item.stock1&&item.stock1[0]">{{item.stock1[0]}} </span>
                        <i class="el-icon-star-off"></i>
                      </div>
                      <div class="wrap-right" v-if="item.price1&&item.price1[0]">${{item.price1[0]}}</div>
                    </div>
                  </div>
                  <div class="shop-name">
                    <div class="name nowrap" v-html="item.name"></div>
                    <div class="desc nowrap" v-if="item.subtitle1&&item.subtitle1[0]">{{item.subtitle1[0]}}</div>
                  </div>
                </div>
                <div class="shop-operate">
                  <el-button type="primary" size="medium" icon="el-icon-s-goods" style="width:100%;" @click="toShopDetail(item.id)"> 进 去 逛 逛</el-button>
                </div>
              </div>
            </el-card>
          </div>
        </div>

        <!-- 分页区域 -->
        <div class="pagination">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="shopListQuery.pageNum" :page-sizes="[8, 16, 24, 32]" :page-size="shopListQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
      </div>
    </div>
    <common-footer></common-footer>
  </div>
</template>

<script>
import CommonHeader from '../../components/Show/CommonHeader'
import CommonFooter from '../../components/Show/CommonFooter'
import { mapState } from 'vuex'

export default {
  components: {
    CommonHeader,
    CommonFooter
  },
  computed: {
    ...mapState({
      cateItem: state => state.cate.cateItem,
      searchKey: state => state.cate.searchKey
    })
  },
  watch: {
    cateItem(val) {
      // console.log('监听', val)
      if (val === '') {
        this.activeName = '全部'
        this.searchMap['category_id'] = ''
        this.getShopList()
      } else {
        // 更新查询分类
        this.activeName = val.name
        this.searchMap['category_id'] = val.id
        this.getShopList()
      }
    },
    searchKey(val) {
      console.log('搜索关键字：', val.value)
      this.searchMap['name'] = val.value
      this.searchMap['category_id'] = ''
      this.activeName = '全部'

      this.getShopList()
    }
  },
  data() {
    return {
      // 控制加载动画效果显示
      loading: false,
      activeName: '全部',
      // 获取商品列表请求参数
      shopListQuery: {
        pageNum: 1,
        pageSize: 8
      },
      searchMap: {
        "name": "",
        "category_id": "",
        "price": "",
      },
      // 商品列表
      shopList: [],
      // 商品总量
      total: 0,
      // 商品分类列表
      shopCateList: [],
      // 图片服务器地址
      imgBaseUrl: 'https://phone-shop.oss-cn-beijing.aliyuncs.com/'
    }
  },
  methods: {
    // 跳转到商品详细页
    toShopDetail(shopId) {
      // this.$router.push({ path: `/shopDetail/${shopId}`})      // 根据path跳转
      // this.$router.push({name:'shopDetail', params:{id:shopId}})  // 根据name跳转

      let routeData = this.$router.resolve({ path: `/shopDetail/${shopId}` });
      window.open(routeData.href, '_blank');
    },

    // 获取商品分类列表
    async getShopCateList() {
      const { data: res } = await this.$http.get('/category/select')
      console.log('商品分类列表', res)
      if (res.code == 200) {
        this.shopCateList = res.data
      }
    },
    // 获取商品列表
    async getShopList() {
      this.loading = true
      const { data: res } = await this.$http.post(`/product/solrSearch?pageNum=${this.shopListQuery.pageNum}&pageSize=${this.shopListQuery.pageSize}`, this.searchMap)
      console.log('商品列表', res)
      if (res.code == 200) {
        this.shopList = res.data.list.map((item) => {
          // var image_url = JSON.parse(item.main_image_url)
          var image_url = JSON.parse(item.sub_images1)
          console.log(image_url);
          for (var key in image_url) {
            item.img = this.imgBaseUrl + image_url[key]
            break
          }
          if (!item.img) {
            item.img = require('../../assets/images/shop/shop4.png')
          }
          return item
        })
        this.total = res.data.total
        // console.log('商品列表', this.shopList)
        console.log('搜索参数', this.searchMap)
      }
      this.loading = false
    },
    // 更改分类高亮
    changeA(item) {
      if (typeof item === 'string') {
        this.activeName = item
        this.searchMap['category_id'] = ''
        this.getShopList()
      } else {
        // 更新查询分类
        this.activeName = item.name
        this.searchMap['category_id'] = item.id
        this.getShopList()
      }
      this.searchMap['name'] = ''
      console.log(this.activeName)
    },
    // 修改分页条数
    handleSizeChange(val) {
      this.shopListQuery.pageSize = val
      this.getShopList()
    },
    // 修改分页页数
    handleCurrentChange(val) {
      this.shopListQuery.pageNum = val
      this.getShopList()
    }
  },
  created() {
    if (typeof this.cateItem === 'string') {
      // console.log('全部')
      this.activeName = '全部'
      this.searchMap['category_id'] = ''
    } else if (this.cateItem) {
      console.log('打印', this.cateItem)
      this.activeName = this.cateItem.name
      this.searchMap['category_id'] = this.cateItem.id
    }
    this.getShopList()
    this.getShopCateList()
  },
}
</script>

<style lang="less" scoped>
.shop-list-box {
  min-width: 1200px;
  min-height: 550px;
  // background-color: #F8F8F8;
  padding: 20px 0px 50px 0px;
  .shop-list {
    // height: calc(100% - 170px);
    // min-height: 500px;
    width: 1200px;
    margin: 0 auto;
    height: 100%;
  }
}

.mycard {
  transition: all 0.5s;
  margin-bottom: 2rem;
  // box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);
}
.mycard:hover {
  transform: translate(0, -10px);
  box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2);
}

// 商品展示卡片
.shop-item {
  .shop-img {
    display: flex;
    justify-content: center;
    align-items: center;
    // height: 100%;
    img {
      height: 200px;
    }
  }
  .shop-detail {
    padding: 0.5rem;
    .shop-price {
      .shop-price-warp {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.95rem;
        .wrap-left {
          color: #ffffff;
          font-weight: 400;
          background-color: #007bff;
          padding: 0.15em 0.35em;
          border-radius: 0.25rem;
        }
        .wrap-right {
          font-weight: 700;
        }
      }
    }
    .shop-name {
      padding: 1rem 0;
      font-size: 0.8rem;
      .name {
        font-weight: 600;
        margin-bottom: 0.3rem;
      }
      .desc {
        font-weight: 300;
      }
      .nowrap {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .shop-operate {
  }
}
.pagination {
  display: flex;
  justify-content: center;
}
// 分类选项栏
.cate-box {
  min-height: 100px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);

  ul {
    width: 1200px;
    min-height: 100px;
    // border:1px solid red;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 30px;
    list-style: none;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;

    li {
      margin: 2px 6px;
      padding: 5px 20px;
      cursor: pointer;
      font-weight: 400;
      border-radius: 30px;
    }
    li:hover {
      background: #ddecf9;
      color: #4cacff;
    }
    .activeLi {
      background: #ddecf9;
      color: #4cacff;
    }
  }
}
</style>